<html>
<head>
	<meta charset="utf-8">
	<title>变变变</title>
	<style>
	 form{
	 	position: relative;
	 }
     input{ float: left;
     margin: 20px;
      }
      .A{width: 150px;
      	height: 150px;
      	background-color: green;
      	position: relative;
      	left: 300px;
      	top: 50px;}
	</style>

</head>
<body>
	<form action="">
		<input type="button" value="Width">
		<input type="button" value="Height">
		<input type="button" value="Color">
		<input type="button" value="Hide">
		<input type="button" value="Reset">
		 0
	</form>
	<div class="A"></div>
</body>
</html>
<script>
	var node = document.getElementsByTagName('input');
	var nod =document.getElementsByClassName("A")
		node[0].onclick=function(){
		nod[0].style.width="200px"
	}
		node[1].onclick=function(){
		nod[0].style.height="200px"
	}
		node[2].onclick=function(){
		nod[0].style.backgroundColor="purple"
	}
		node[3].onclick=function(){
		nod[0].style.display="none"
	}
		node[4].onclick=function(){
		nod[0].style.cssText=""
	}
	
</script>